<template>
  <div class="complaint__list">
    <common-pull-down-up
      v-model:pullOptions="pullOptions"
      :pageOptions="queryParams"
      :title="'投诉记录'"
      :whiteStyle="true"
      @loadData="loadData"
      @pullDownRefresh="pullDownRefresh"
    >
      <template #navRight>
        <span @click="onComplaint">发起投诉</span>
      </template>
      <template #content>
        <list-item-component
          class="list__item"
          @onClick="onItemClick"
          v-for="item in pullOptions.rows"
          :key="item.id"
          :item="item"
        />
      </template>
      <template #noMore>
        <img src="@/assets/image/mine/complaint/no_more.png" />
      </template>
      <template #noMoreText>
        <span>暂无投诉</span>
      </template>
    </common-pull-down-up>
    <!-- <div class="btn" @click="onConcat">联系他</div> -->
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, ref } from 'vue'
import CommonPullDnUp from '@/components/CommonPullDnUp.vue'
import usePullDownUp from '@/utils/usePullDownUp'
import { ListItemType } from './utils/types'
import ListItem from './components/ListItem.vue'
import { useRouter } from 'vue-router'
import { Toast } from 'vant'

export default defineComponent({
  name: 'ComplaintList',
  components: {
    'common-pull-down-up': CommonPullDnUp,
    'list-item-component': ListItem
  },
  setup() {
    const requestUrl = 'complaint/handleTransportBillComplaintPage'

    const queryModel = reactive<any>({})

    const { pullOptions, loadData, pullDownRefresh, queryParams } = usePullDownUp<ListItemType>({
      url: requestUrl,
      queryModel
    })

    const router = useRouter()

    // 联系他/她
    const onConcat = (): void => {
      //
    }

    // 投诉
    const onComplaint = (): void => {
      router.push({
        name: 'ComplaintUpdate'
      })
    }

    // 跳转详情
    const onItemClick = (item: ListItemType): void => {
      router.push({
        name: 'ComplaintDetail',
        query: {
          id: item.id
        }
      })
    }

    return {
      onConcat,
      onComplaint,
      onItemClick,
      loadData,
      queryParams,
      pullDownRefresh,
      pullOptions
    }
  }
})
</script>

<style lang="scss" scoped>
@import '@/style/variables.scss';
@import '@/style/mixins.scss';
.complaint__list {
  width: 100%;
  height: 100%;
  .list__item {
    margin-bottom: 10px;
  }
}
</style>
